<template>
    <el-dialog
            title="Point Code"
            :visible.sync="dialogVisible"
            width="100%"
    >
        <div class="filter-content">
            <el-select v-model="unit"
                       size="small"
                       class="filter-input"
                       filterable
                       placeholder="Unit">
                <el-option
                        v-for="item in unitList"
                        :key="item.id"
                        :label="item.serviceUnit"
                        :value="item.serviceUnit">
                </el-option>
            </el-select>
            <el-select v-model="category"
                       size="small"
                       class="filter-input"
                       filterable placeholder="Category">
                <el-option
                        v-for="item in cateList"
                        :key="item.id"
                        :label="item.serviceCategory"
                        :value="item.serviceCategory">
                </el-option>
            </el-select>
            <el-input v-model="pointCode"
                      style="display: inline-block;width: 200px;"
                      placeholder="Point Code"
                      size="small"></el-input>
        </div>
        <el-table
                height="400"
                row-key="id"
                :data="pointCodeList.slice((pageNum - 1) * pageSize,pageNum * pageSize)"
                style="width: 100%">
            <el-table-column
                    prop="serviceCategory"
                    label="category"
            >
            </el-table-column>
            <el-table-column
                    prop="serviceItem"
                    label="description"
            >
            </el-table-column>
            <el-table-column
                    prop="hours"
                    label="hours">
            </el-table-column>
            <el-table-column
                    prop="pointCode"
                    label="pointCode">
            </el-table-column>
            <el-table-column
                    prop="serviceUnit"
                    label="unit">
            </el-table-column>
            <el-table-column
            >
                <template slot-scope="scope">
                    <el-checkbox
                            @change="f=>statusChange(scope.row,scope.$index,f)"
                            v-model="scope.row.selected"></el-checkbox>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <el-pagination background
                           :page-size="pageSize"
                           @current-change="changePage"
                           layout="prev, pager, next"
                           :total="pointCodeList.length"></el-pagination>
        </div>
        <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
        <el-button type="primary" @click="selectedPointCode">{{$t('confirm')}}</el-button>
      </span>
    </el-dialog>
</template>

<script>
    import {

        getPcCategoryList,
        getPcList,
        getPcUnit,
    } from "../../api/service";
    import {ERROR_OK} from "../../util/config";
    import mixins from '../../util/mixins'

    export default {
        name: "point-code-dialog",
        mixins: [mixins],
        data() {
            return {
                pointCode: '',
                dialogVisible: false,
                list: [],
                unit: '',
                category: '',
                cateList: [],
                unitList: []
            }
        },
        computed: {
            pointCodeList() {
                return this.list.filter(
                    item => item.serviceCategory.includes(this.category)
                ).filter(
                    item => item.serviceUnit.includes(this.unit)
                ).
                filter(item => item.pointCode.toLowerCase().includes(this.pointCode.toLowerCase()));
            }
        },
        created() {
            this.getPointList();
            this.getUnit();
            this.getCategory();
        },
        methods: {
            async getPointList() {
                const {status, data} = await getPcList();
                if (status === ERROR_OK) {
                    this.list = data;
                }
            },
            async getUnit() {
                const {status, data} = await getPcUnit();
                if (status === ERROR_OK) {
                    this.unitList = data;
                }
            },
            async getCategory() {
                const {status, data} = await getPcCategoryList();
                if (status === ERROR_OK) {
                    this.cateList = data
                }
            },
            statusChange(r, idx, flag) {
                const index = this.cateList.findIndex(item=>item.id===r.id)
                this.cateList.splice(index, 1, {...r, selected: flag})
            },
            selectedPointCode() {
                const list = this.list.filter(item => item.selected === true);
                this.$emit('selected', list);
                this.close();
            },
            close() {
                this.dialogVisible = false
            },
            open() {
                this.dialogVisible = true
            },
            _initList() {
                this.list.forEach(item => {
                    item.selected = false;     //选择框所有的状态清空
                })
            }
        },
        watch: {
            dialogVisible(flag) {
                if (flag) {
                    this._initList()
                }
            }
        }
    }
</script>

<style scoped lang="scss">
    .filter-content {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        padding-bottom: 20px;
    }

    .filter-input {
        display: inline-block;
        width: 300px;
        margin-right: 20px;
    }
</style>